<template>
  <view class="task_list_page">
    <view v-if="taskType !== 2" class="content">
      <view class="title">任务名称</view>
      <view v-for="(i, idx) in list" :key="idx" class="item">
        <view class="left">
          <image
            src="https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/home_task.png"
            mode=""
            class="icon"
            lazy-load
          >
          </image>
          <text class="name">{{ i.name }}</text>
        </view>
        <view class="right">
          <view
            v-if="i.relationType"
            class="delete"
            @click="handleDeleteTask(i.id)"
            >删除</view
          >
          <view @click="handleChooseTask(i)">
            <image
              v-if="i.checked"
              class="checked"
              src="@/static/iconPicture/checked.png"
              mode=""
              lazy-load
            >
            </image>
            <text v-else class="checkbox"></text>
          </view>
        </view>
      </view>
      <view class="defined" @click="handleUserDefined"> + 自定义任务内容 </view>
    </view>
    <!-- 系统任务 -->
    <view v-if="taskType === 2" class="system">
      <view class="system_title">{{ chooseTask?.name }}</view>
      <view class="system_task">
        <view class="system_task_label"
          ><text style="color: red">*</text>{{ chooseTask?.unit }}</view
        >
        <view class="system_task_input">
          <input
            v-model="formData.targetNum"
            type="number"
            placeholder="请输入"
            class="input_box"
          />
          <view class="handle_icon">
            <view class="up_dowm" @click="handleUpNumber('up')">
              <image
                src="@/static/search/pack_more.png"
                mode=""
                class="icon"
              ></image>
            </view>
            <view class="up_dowm" @click="handleUpNumber('down')">
              <image
                src="@/static/search/picker_more.png"
                mode=""
                class="icon"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="btn-primary" @click="submit">{{ btnText }}</button>
    </view>
    <!-- 自定义任务 -->
    <CustomPopup
      titleText="自定义任务"
      v-model="showCustomPopup.definedTaskPopup"
      @handleConfirmBtn="handleConfirmPopup(1)"
    >
      <view class="defined_Popup">
        <view class="label">任务名称</view>
        <input
          v-model="addTaskName"
          type="text"
          maxlength="18"
          placeholder="请输入"
          class="input_box"
          placeholder-style="color:#A9AAB5;font-size:30rpx;"
        />
      </view>
    </CustomPopup>
    <!-- 删除提示 -->
    <CustomPopup
      titleText="删除提示"
      v-model="showCustomPopup.deleteTipPopup"
      @handleConfirmBtn="handleConfirmPopup(2)"
    >
      <view class="delete_popup">是否确认删除该任务？</view>
    </CustomPopup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import {
  taskConfigListApi,
  addTaskConfigApi,
  deleteTaskConfigApi,
} from "@/api";
import CustomPopup from "@/pages/subpackage/home/Components/CustomPopup/CustomPopup.vue";

const showCustomPopup = ref({
  definedTaskPopup: false,
  deleteTipPopup: false,
});
const deleteId = ref(); // 删除id
const taskType = ref(1); // 1-自定义任务 2-系统任务
const btnText = ref("下一步");
const chooseTask = ref({}); // 选中任务
const formData = ref({
  name: "",
  taskConfigId: undefined,
  targetNum: undefined,
});
const addTaskName = ref(""); // 新增任务
const list = ref([]); // relationType-null系统任务 非null自定义任务

// 选择任务
function handleChooseTask(i) {
  i.checked = !i.checked;
  chooseTask.value = i.checked ? i : {};
  list.value = list.value.map((item) => {
    if (item.id === i.id && i.checked) {
      return {
        ...item,
        checked: true,
      };
    } else {
      return {
        ...item,
        checked: false,
      };
    }
  });
  btnText.value = i.checked && i.relationType ? "确定" : "下一步";
}
// 删除自定义任务
function handleDeleteTask(id) {
  deleteId.value = id;
  showCustomPopup.value.deleteTipPopup = true;
}
// 自定义任务
function handleUserDefined() {
  addTaskName.value = "";
  showCustomPopup.value.definedTaskPopup = true;
}

// 弹窗确定按钮
async function handleConfirmPopup(type) {
  switch (type) {
    case 1:
      if (!addTaskName.value) {
        uni.showToast({
          icon: "none",
          title: "请输入任务名称",
        });
        return;
      }
      let res = await addTaskConfigApi({
        name: addTaskName.value,
      });
      if (res.code === 200) {
        await fetchTaskList();
        showCustomPopup.value.definedTaskPopup = false;
      }
      break;
    case 2:
      let res1 = await deleteTaskConfigApi(deleteId.value);
      if (res1.code === 200) {
        await fetchTaskList();
        showCustomPopup.value.deleteTipPopup = false;
      }
      break;
  }
}
// 下一步
async function submit() {
  if (chooseTask.value.id) {
    formData.value.name = chooseTask.value.name;
    formData.value.taskConfigId = chooseTask.value.id;
    if (chooseTask.value.relationType) {
      formData.value.targetNum = undefined;
      uni.$emit("updateTask", {
        taskData: JSON.stringify(formData.value),
      });
      uni.navigateBack();
    } else {
      if (taskType.value === 2) {
        uni.$emit("updateTask", {
          taskData: JSON.stringify({
            ...formData.value,
            unit: chooseTask.value.unit,
          }),
        });
        uni.navigateBack();
      } else {
        formData.value.targetNum = 1;
        taskType.value = 2;
        btnText.value = "确定";
      }
    }
  } else {
    uni.showToast({
      icon: "none",
      title: "请选择任务",
    });
  }
}
// 数量
function handleUpNumber(type) {
  switch (type) {
    case "up":
      formData.value.targetNum++;
      break;
    case "down":
      if (formData.value.targetNum === 1) return;
      formData.value.targetNum--;
      break;
  }
}
// 获取任务
async function fetchTaskList() {
  uni.showLoading({
    title: "加载中...",
  });
  let res = await taskConfigListApi();
  uni.hideLoading();
  if (res.code === 200) {
    list.value = res.data;
  }
}
onLoad(() => {
  fetchTaskList();
});
</script>

<style lang="scss" scoped>
.task_list_page {
  padding: 30rpx 30rpx 202rpx 30rpx;

  .content {
    padding: 30rpx 30rpx 40rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-sizing: border-box;
    color: #333;
    font-size: 30rpx;

    .title {
      margin: 0 0 10rpx 0;
      font-weight: 500;
      font-size: 32rpx;
    }

    .item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #eee;

      .left {
        display: flex;

        .icon {
          margin-right: 10rpx;
          width: 40rpx;
          height: 40rpx;
        }

        .name {
          max-width: 454rpx;
          line-height: 42rpx;
        }
      }

      .right {
        display: flex;
        align-items: center;

        .delete {
          margin: 0 19rpx 0 0;
          white-space: nowrap;
          color: #ff2828;
        }

        .checkbox {
          display: block;
          width: 30rpx;
          height: 30rpx;
          border-radius: 6rpx;
          border: 1rpx solid #ddd;
          box-sizing: border-box;
        }

        .checked {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }

    .defined {
      margin-top: 30rpx;
      color: #615dff;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 172rpx;
    left: 0;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    font-weight: 500;

    button::after {
      border: none;
    }

    .btn-primary {
      margin-top: 16rpx;
      box-sizing: border-box;
      width: 440rpx;
      height: 90rpx;
      background-color: #615dff;
      color: #ffffff;
      border-radius: 20rpx;
      font-size: 30rpx;
      line-height: 90rpx;
    }
  }

  .system {
    padding: 30rpx 30rpx 40rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    color: #333;
    box-sizing: border-box;

    &_title {
      margin-bottom: 30rpx;
      font-size: 32rpx;
      font-weight: 500;
    }

    .system_task {
      display: flex;
      align-items: center;

      &_label {
        margin-right: 30rpx;
        width: 76rpx;
        line-height: 42rpx;
        white-space: nowrap;
      }

      &_input {
        position: relative;
        height: 90rpx;
        width: calc(100vw - 226rpx);
        background-color: #f9f9fb;
        border-radius: 16rpx;
        text-align: left;

        .input_box {
          padding: 24rpx 20rpx;
          box-sizing: border-box;
          height: 100%;
          line-height: 45rpx;
        }

        .handle_icon {
          position: absolute;
          right: 0;
          top: 0;
          width: 70rpx;
          border-left: 1rpx solid #eee;
          z-index: 99;

          .up_dowm {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 45rpx;

            &:first-child {
              border-bottom: 1rpx solid #eee;
            }

            .icon {
              width: 30rpx;
              height: 30rpx;
            }
          }
        }
      }
    }
  }

  .defined_Popup {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160rpx;
    font-size: 30rpx;
    color: #333;

    .label {
      margin-right: 30rpx;
    }

    .input_box {
      padding: 0 20rpx;
      height: 90rpx;
      width: 384rpx;
      background-color: #f9f9fb;
      border-radius: 16rpx;
      text-align: left;
      box-sizing: border-box;
      line-height: 45rpx;
    }
  }

  .delete_popup {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 145rpx;
  }
}
</style>
